#{extends 'main.html' /}
#{set title:'Graphics' /}

#{set 'moreScripts'}
<script language="javascript" type="text/javascript" src="/public/javascripts/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="/public/javascripts/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="/public/javascripts/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="/public/javascripts/json2.js"></script>
#{/set}

#{set "moreStyles"}
<link rel="stylesheet" type="text/css" href="/public/stylesheets/jquery.jqplot.min.css"/>
#{/set}

#{doBody /}


<div id="compressionRate" style="position:relative;float:left;height:500px;width:700px;"></div>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var compressionRateModel = ${CompressionRatePlot.raw()}
        var compressionRatePoints = []
        var compressionRateSeries = []

        for (var i = 0; i < compressionRateModel.curves.length; i++) {
            var curve = compressionRateModel.curves[i];
            if (curve.points.length > 0) {
                compressionRatePoints.push(curve.points);
                compressionRateSeries.push({label:curve.algorithmType.caption, color:curve.algorithmType.color });
            }
        }

        $.jqplot("compressionRate", compressionRatePoints, {
            "series":compressionRateSeries,
            "legend":{
                "show":true, "location":"ne", "showSwatch":true, "xoffset":12, "yoffset":12 },
            "axes":{
                "xaxis":{
                    "label":compressionRateModel.xLabel
                },
                "yaxis":{
                    "label":compressionRateModel.yLabel
                }
            }
        });


    });
</script>
